<script setup lang="ts">
import { Menu as IconMenu, Message, Setting } from "@element-plus/icons-vue";
import { computed, onBeforeUnmount, onMounted, onUpdated, ref } from "vue";
const rootHeight = ref("100%");
const allBreadCumb = ref([
  {
    name: "面包屑显示的名称",
    path: "1",
  },
]);
//--------------------------------------------------------------------------------------
onMounted(() => {
  const height = document.body.offsetHeight;
  rootHeight.value = height + "px";
  window.addEventListener("resize", resizeListener);
  // 这里模拟，获取数据后，重新排序
  resortList();
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeListener);
});
onUpdated(() => {
  const height = document.body.offsetHeight;
  rootHeight.value = height + "px";
  console.log("宽度[onUpdated]----" + rootHeight.value);
});
function resizeListener() {
  const height = document.body.offsetHeight;
  rootHeight.value = height + "px";
  console.log("宽度[resizeListener]----" + rootHeight.value);
}
const handleOpen = (key: string, keyPath: string[]) => {
  console.log("<-handleOpen->", key, JSON.stringify(keyPath));
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log("<-handleClose->", key, JSON.stringify(keyPath));
};
//----------------------------------------------------------------------
const imgList = [
  "http://gips3.baidu.com/it/u=3886271102,3123389489&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960",
  "http://gips0.baidu.com/it/u=1690853528,2506870245&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024",
  "http://gips2.baidu.com/it/u=828570294,3060139577&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024",
];
//----------------------------------------------------------------------
const imgListResort = ref([[""]]);
function resortList() {
  const size = imgList.length;
  let reGroupList = [];
  for (let i = 0; i < size; i += 1) {
    let list = [];
    list.push(imgList[i]);
    list.push(imgList[(i + 1) % size]);
    list.push(imgList[(i + 2) % size]);
    reGroupList.push(list);
  }
  imgListResort.value = reGroupList;
}
//----------------------------------------------------------------------
</script>
<template>
  <!-- ************************************************************** -->
  <!-- 卡牌模式，一页三个，一次换一个 -->
  <!-- <div style="width: 50%; background-color: aquamarine; overflow: hidden">
    <el-carousel style="width: 100%; height: 100%" type="card">
      <el-carousel-item v-for="item in imgList" :key="item">
        <img
          :src="item"
          style="width: 100%; height: 300px; object-fit: cover"
        />
      </el-carousel-item>
    </el-carousel>
  </div> -->
  <!-- ************************************************************** -->
  <!-- 一页三个，一次换三个 -->
  <!-- <div style="width: 50%; background-color: #ffffff00; overflow: hidden">
    <el-carousel :interval="4000">
      <el-carousel-item v-for="(group, index) in imgListResort" :key="index">
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item, idx) in group" :key="idx">
            <img
              :src="item"
              style="
                width: 100%;
                height: 300px;
                object-fit: cover;
                background-color: aquamarine;
              "
            />
          </el-col>
        </el-row>
      </el-carousel-item>
    </el-carousel>
  </div> -->
  <!-- ************************************************************** -->
  <el-carousel style="width: 100%; background-color: aquamarine">
    <el-carousel-item v-for="item in imgList" :key="item">
      <img
        :src="item"
        alt="carousel image"
        style="width: 100%; height: 300px; object-fit: cover"
      />
    </el-carousel-item>
  </el-carousel>
  <!-- ************************************************************** -->
</template>
<style scoped>
.trackStyle {
  transition: transform 0.4s ease-in-out;
}
.carousel-container {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}
.carousel-track {
  display: flex;
  height: 100%;
}
.carousel-item {
  flex: 0 0 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.carousel-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
}
.prev {
  left: 10px;
}
.next {
  right: 10px;
}
.carousel-dots {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.carousel-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.carousel-dots span.active {
  background: white;
}
/* el-carousel-item 样式原文件 */
/* 这里的width指定的是在非card模式下，单个图的宽度，对card模式不生效 */
:deep(.el-carousel__item) {
  display: inline-block;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%;
}
/* 当前活跃项(非card模式) */
:deep(.el-carousel__item, .el-carousel__item.is-active) {
  z-index: calc(var(--el-index-normal) - 1);
}
/* 移动动画时间，动画样式 */
:deep(.el-carousel__item--card, .el-carousel__item.is-animating) {
  transition: transform 0.4s ease-in-out;
}
/* 这里的width指定的是在card模式下，单个图的宽度，对非card模式不生效；【默认50%】 */
:deep(.el-carousel__item--card) {
  width: 50%;
}
/* 这里声明width 会覆盖 （.el-carousel__item--card） 指定的width */
:deep(.el-carousel__item--card.is-in-stage) {
  cursor: pointer;
  width: 50%;
  z-index: calc(var(--el-index-normal));
}
:deep(
    .el-carousel__item--card.is-in-stage.is-hover .el-carousel__mask,
    .el-carousel__item--card.is-in-stage:hover .el-carousel__mask
  ) {
  opacity: 0;
}
/* 当前活跃项，card模式【会只修改中间部分的宽度】 */
:deep(.el-carousel__item--card.is-active) {
  justify-content: center;
  width: 50%;
  z-index: calc(var(--el-index-normal) + 1);
  padding-left: 8%;
  padding-right: 8%;
}
/* 修改card模式下，遮罩部分的颜色，需要使用:deep(样式名)来使得对应的样式修改生效 */
:deep(.el-carousel__mask) {
  background-color: #00000000;
  height: 100%;
  left: 0;
  opacity: 1;
  position: absolute;
  top: 0;
  transition: var(--el-transition-duration-fast);
  width: 100%;
}
/* ******************************** */
:deep(.el-carousel) {
  --el-carousel-arrow-font-size: 12px;
  --el-carousel-arrow-size: 36px;
  --el-carousel-arrow-background: rgba(31, 45, 61, 0.11);
  --el-carousel-arrow-hover-background: rgba(31, 45, 61, 0.23);
  --el-carousel-indicator-width: 30px;
  --el-carousel-indicator-height: 2px;
  --el-carousel-indicator-padding-horizontal: 4px;
  --el-carousel-indicator-padding-vertical: 12px;
  --el-carousel-indicator-out-color: var(--el-border-color-hover);
  position: relative;
}
:deep(.el-carousel--horizontal, .el-carousel--vertical) {
  overflow: hidden;
}
:deep(.el-carousel__container) {
  width: 100%;
  height: 300px;
  position: relative;
}
:deep(.el-carousel__button) {
  background-color: #ffffff;
  border: none;
  cursor: pointer;
  display: block;
  height: var(--el-carousel-indicator-height);
  margin: 0;
  opacity: 0.48;
  outline: none;
  padding: 0;
  transition: var(--el-transition-duration);
  width: var(--el-carousel-indicator-width);
}
</style>
